<script setup lang="ts">
//展示数据 - 块
import Icon from "@/components/icon/Icon.vue";
import StateIcon from "@/components/icon/stateIcon.vue";
import { DataType } from "@/store/interface";
import SaveData from "@/store/recordData";
defineProps<{
  data: DataType[];
}>();
</script>

<template>
  <div class="flex justify-between flex-wrap">
    <div
      class="relative w-[48%] p-4 m-auto shadow-lg rounded-lg mt-4 dark:bg-darkBgMobileCard bg-BgMobileCard"
      v-for="(item, index) in data"
      :key="index"
    >
      <a
        class="contents dark:text-darkTwoTitle text-TwoTitle"
        :href="item.download"
        target="_blank"
        :aria-label="'跳转至' + item.name"
        @click="SaveData(item)"
      >
        <div class="w-full h-full text-center">
          <div class="flex flex-col justify-between h-full">
            <Icon :data="item" class="w-full h-24 object-contain" />
            <p class="absolute bg-gray-800 top-2 right-2 rounded-full">
              <StateIcon
                class="max-w-6 rounded-full bg-green-500"
                v-if="item.state"
                :dataState="item.state"
              />
            </p>
            <p class="mt-4 text-lg">
              {{ item.name }}
            </p>
            <!--描述-->
            <p
              class="text-xs font-thin min-h-10 dark:text-darkThreeTitle text-ThreeTitle"
            >
              {{ item.msg }}
            </p>
            <p
              class="absolute bottom-2 right-2 text-xs font-thin"
              v-show="item.num && item.num > 0"
            >
              {{ item.num }}次
            </p>
          </div>
        </div>
      </a>
    </div>
  </div>
</template>
